<h3>Embedded Forms Quickstart</h3>
<form role="form"
      name="variablesForm">

<div class="row">

  <div class="col-xs-6">
    <h2>Loan Data</h2>

    <!-- Loan Type -->
    <div class="form-group">
      <label for="selectLoanType">Type of the loan</label>
      <div class="controls">
        <!--select box -->
        <select required
           class="form-control"
           name="loanType"
           cam-variable-name="loanType"
           cam-variable-type="String"
           ng-change="calculateLoan()">
          <option value="mortage" checked>Mortage Loan (5%)</option>
          <option value="cashAdvance">Cash Advance (10%)</option>
        </select>
      </div>

      <!-- Custom validation message for select box -->
      <p ng-if="variablesForm.loanType.$invalid" style="color: red">
        Please select a loan type.
      </p>
    </div>

    <!-- Loan Amount -->
    <div class="form-group">
      <label for="inputLoanAmount">Amount</label>
      <div class="controls">
        <input required
          class="form-control"
          cam-variable-type="Double"
          cam-variable-name="loanAmount"
          min="1000"
          ng-change="calculateLoan()"
          name="loanAmount"
          type="number" />
      </div>
    </div>

    <!-- Runtime in Years -->
    <div class="form-group">
      <label for="inputLoanRuntime">Runtime (Years)</label>
      <div class="controls">
        <input required
          class="form-control"
          cam-variable-type="Double"
          cam-variable-name="loanRuntime"
          min="2" max="30"
          ng-change="calculateLoan()"
          name="loanRuntime"
          type="number" />
      </div>
    </div>

    <!-- calculate monthly payment -->
    Projected monthly payment:
    <p ng-if="monthlyPayment" class="alert alert-success">
      {{monthlyPayment}}€ at {{interest}}% interest rate.
    </p>

    <p ng-if="!monthlyPayment" class="alert alert-danger">
      Invalid selection.
    </p>

    <!-- The following code demonstrates use of custom scripting.

          The 'cam-script' directive makes sure the the script is loaded and can bind to the angular $scope for the form.

          Access to form fields is provided through $scope.variablesForm.
       -->
    <script cam-script type="text/form-script">
      $scope.calculateLoan = function() {
        var form = $scope.variablesForm;

        if(!form.loanType.$valid || !form.loanAmount.$valid || !form.loanRuntime.$valid) {
          $scope.monthlyPayment = undefined;

        } else {

          var loanAmount = form.loanAmount.$modelValue;
          var years = form.loanRuntime.$modelValue;
          var loanType = form.loanType.$modelValue;
          var interestRate = 0;

          if(loanType == "mortage") {
            interestRate = 0.05;
          } else if(loanType == "cashAdvance") {
            interestRate = 0.10;
          }

          $scope.interest = 100 * interestRate;

          // calculate monthly payment using special formula provided by Bobby G
          $scope.monthlyPayment = Math.round((loanAmount * ((Math.pow((1+interestRate),years)*interestRate) / (Math.pow((1+interestRate),years)-1))) * (1/12));

        }
      }

    </script>

  </div>

  <div class="col-xs-6">
    <h2>Contact Data</h2>

    <!-- Gender -->
    <div class="form-group">
      <label for="gender">Gender</label>
      <div class="controls">

        <!--select box -->
        <select class="form-control"
           cam-variable-name="gender"
           cam-variable-type="String"
           ng-change="calculateLoan()">
          <option value="m" checked>Mr.</option>
          <option value="f">Mrs.</option>
        </select>

    </div>
    </div>

    <!-- Firstname -->
    <div class="form-group">
      <label for="inputFirstname">First Name</label>
      <div class="controls">
        <input class="form-control"
               required
               type="text"
               cam-variable-name="firstname"
               cam-variable-type="String"
               placeholder="John"
               ng-minlength="2"
               ng-maxlength="20" />
      </div>
    </div>

    <!-- Lastname -->
    <div class="form-group">
      <label for="inputLastname">Last Name</label>
      <div class="controls">
        <input class="form-control"
               required
               type="text"
               cam-variable-name="lastname"
               cam-variable-type="String"
               placeholder="Doe"
               ng-minlength="2"
               ng-maxlength="20" />
      </div>
    </div>

    <!-- Email -->
    <div class="form-group">
      <label for="inputEmail">Email</label>
      <div class="controls">
        <input class="form-control"
               required
               type="text"
               cam-variable-name="email"
               cam-variable-type="String"
               placeholder="john.doe@camunda.org"
               ng-minlength="2"
               ng-maxlength="20" />
      </div>
    </div>

    <!-- Address -->
    <div class="form-group">
      <label for="inputAddress">Address</label>
      <div class="controls">
        <textarea class="form-control"
                  cam-variable-name="address"
                  cam-variable-type="String"
                  rows="4"></textarea>
      </div>
    </div>

  </div>

</div>
</form>
